<template>
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="序号" width="55px" />
        <el-table-column prop="porterName" label="护工" />
        <el-table-column prop="wardAreaId" label="病区" />
        <el-table-column prop="wardId" label="病房" />
        <el-table-column prop="bedId" label="床位" />
        <el-table-column prop="replaceBedSheet" label="更换床单">
            <template #default="scope">
                {{ scope.row.replaceBedSheet ? "是" : "否" }}
            </template>
        </el-table-column>
        <el-table-column prop="replaceBedding" label="更换被褥">
            <template #default="scope">
                {{ scope.row.replaceBedding == 1 ? "是" : "否" }}
            </template>
        </el-table-column>
        <el-table-column prop="disinfect" label="消毒液擦拭床头柜">
            <template #default="scope">
                {{ scope.row.disinfect == 1 ? "是" : "否" }}
            </template>
        </el-table-column>
        <el-table-column prop="emit" label="枕头紫外线照射">
            <template #default="scope">
                {{ scope.row.emit == 1 ? "是" : "否" }}
            </template>
        </el-table-column>
        <el-table-column prop="replaceMattress" label="更换床垫">
            <template #default="scope">
                {{ scope.row.replaceMattress == 1 ? "是" : "否" }}
            </template>
        </el-table-column>
        <el-table-column prop="outDisinfect" label="出院消毒">
            <template #default="scope">
                {{ scope.row.outDisinfect == 1 ? "是" : "否" }}
            </template>
        </el-table-column>
        <el-table-column prop="workTime" label="时间" width="200px" />
    </el-table>

    <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
        :page-sizes="[10, 20, 30, 40]" :background="true" layout="total, sizes, prev, pager, next, jumper"
        :total="page.totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

</template>

<script lang="ts" setup>
import http from '@/api/http';
import { onMounted, reactive, ref } from 'vue';
onMounted(() => {
    show();
})


const handleSizeChange = (val: number) => {
    page.pageSize = val;
    show();
}
const handleCurrentChange = (val: number) => {
    page.pageIndex = val;
    show();
}

const page = reactive({
    pageIndex: 1,
    pageSize: 10,
    totalPage: 0,
    totalCount: 0
})

const show = () => {
    http.get(`/api/NurseManageController/ShowPorterWorkDetail?pageIndex=${page.pageIndex}&pageSize=${page.pageSize}`)
        .then(res => {
            console.log(res);
            tableData.value = res.data.items
            page.totalPage = res.data.totalPage
            page.totalCount = res.data.totalCount
        })
}


const tableData = ref([])
</script>
